

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小分队乱斗</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
</head>
<body onkeydown="move(event)">
  <canvas id="c-canvas"></canvas>

  <div class="result"></div>

  <div class="up">
    <div>提示: 鼠标左键点击选择人物, 选择后将无法更改人物</div>
    <div class="up-c">
    </div>
    <div class="text" id="text" contenteditable="true"></div>

    <div class="ready" onclick="ready()">
      准备
    </div>
  </div>
</body>
</html>

<script type="text/javascript">
  
  let id = ""
  //和服务器建立长连接
  var socket = io.connect('http://192.168.88.219:3000?roomid=' + 1);

  let a = new Image()
  let b = new Image()
  let c = new Image()
  let d = new Image()
  let a_bullet = new Image()
  let b_bullet = new Image()
  let c_bullet = new Image()
  let d_bullet = new Image()
  a.src = "image/a.png" 
  a_bullet.src = "image/a_bullet.png"
  b.src = "image/b.png" 
  b_bullet.src = "image/b_bullet.png"
  c.src = "image/c.png" 
  c_bullet.src = "image/c_bullet.png"
  d.src = "image/d.png" 
  d_bullet.src = "image/d_bullet.png"

  let canvas = document.getElementById("c-canvas")
  canvas.width =  window.innerWidth
  canvas.height =  window.innerHeight
  let ctx = canvas.getContext("2d")
  let x = 100
  let y = 100
  let p
  let role_x = 0
  let role_y = 0
  let moveSpeed = 10
  let bulletArray = []
  let bulletAnimation = ""
  let shootState = true
  let shootSpend = 3
  let displayState = "none"
  let array = [
    {img: "image/a_x.png", attack: 10, moveSpeed: 10, attackSpeed: 1, bloodVolume: 100},
    {img: "image/b_x.png", attack: 20, moveSpeed: 15, attackSpeed: 0.5, bloodVolume: 120},
    {img: "image/c_x.png", attack: 6, moveSpeed: 12, attackSpeed: 1.5, bloodVolume: 150},
    {img: "image/d_x.png", attack: 5, moveSpeed: 8, attackSpeed: 2, bloodVolume: 80}
  ]
  let pitchNumber = ""
  let messageArray = []
  let numberArray = []
  let readyState = false


  canvas.style.display = displayState

  let html = ""
  array.forEach((item, index) => {
    html = html + 
      "<div class=up-d onclick=pitchOn(" + index +")>" +
      '<img src="' + item.img + '">' +
      "<div>攻击: " + item.attack + "</div>" +
      "<div>移动速度: " + item.moveSpeed + "</div>" +
      "<div>攻击速度: " + item.attackSpeed + "</div>" +
      "<div>血量: " + item.bloodVolume + "</div>" +
      "</div>"
  })

  let messageText = document.getElementById("text")

  let up =  document.getElementsByClassName("up")
  let upC =  document.getElementsByClassName("up-c")
  let upD =  document.getElementsByClassName("up-d")
  upC[0].innerHTML = html



  function drawGame() {
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
    role_x = role_x + 1 > 3 ? 0 : role_x + 1
    numberArray.forEach((item, index)=> {
      ctx.drawImage(item.pitchOn == 0 ? a : item.pitchOn == 1 ? b : item.pitchOn == 2 ? c : d, role_x * 32, item.role_y * 48, 32, 48, item.x , item.y, 32, 48)
    })
  }


   
    
  function pitchOn(index) {
    let flag = ""
    let i = 0
    if (pitchNumber === "") {
      numberArray.forEach(item => {
        i++
        if (item.pitchOn == index) {
           flag = false
           alert("此人物已经被其他玩家选择")
        }
      })
      if (flag === "" && i === numberArray.length) {
        pitchNumber = index
        upD[index].style.border = "1px solid pink"     
        socket.emit('pitchOn', index)
      }
    }
  }

  function move(event) {
    switch (event.keyCode) {
      case 65:
        if (numberArray[p].x - moveSpeed >= 0) {
          numberArray[p].x -= moveSpeed
          numberArray[p].bullet_x = numberArray[p].x
          numberArray[p].role_y = 1
          socket.emit('serveMove', numberArray)
        }
        break;
      case 68:
        if (numberArray[p].x + moveSpeed < window.innerWidth - 32) {
          numberArray[p].x += moveSpeed
          numberArray[p].bullet_x = numberArray[p].x
          numberArray[p].role_y = 2
          socket.emit('serveMove', numberArray)
        }
        break;
      case 83:
        if (numberArray[p].y + moveSpeed < window.innerHeight - 32) {
          numberArray[p].y += moveSpeed
          numberArray[p].bullet_y = numberArray[p].y
          numberArray[p].role_y = 0
          socket.emit('serveMove', numberArray)
        }
        break;
      case 87:
        if (numberArray[p].y - moveSpeed >= 0) {
          numberArray[p].y -= moveSpeed
          numberArray[p].bullet_y = numberArray[p].y
          numberArray[p].role_y = 3
          socket.emit('serveMove', numberArray)
        }
        break;
      case 74:
        shoot()
        break;
      case 75:
        ultimateSkill()
        break;
    }
  }

  function shoot() {
    if (shootState) {
      shootState = false
      socket.emit('shoot', p)
      setTimeout(()=> {shootState = true}, 500)
    }
    
  }

  function drawBullet() {
    bulletAnimation = requestAnimationFrame(drawBullet)
    numberArray.forEach((item, index) => {
      for (let i = 0; i < item.bulletArray.length; i++) {
        let bulletArray = item.bulletArray
        // bulletArray.length == 0 && cancelAnimationFrame(bulletAnimation)
    　  if (
          bulletArray[i].bullet_x + shootSpend < window.innerWidth && bulletArray[i].bullet_x - shootSpend > 0 &&
          bulletArray[i].bullet_y + shootSpend < window.innerHeight && bulletArray[i].bullet_y - shootSpend > 0
        ) {
          switch (bulletArray[i].role_y) {
          case 0:
            bulletArray[i].bullet_y = bulletArray[i].bullet_y + shootSpend
            break;
          case 1:
            bulletArray[i].bullet_x = bulletArray[i].bullet_x - shootSpend
            break;
          case 2:
            bulletArray[i].bullet_x = bulletArray[i].bullet_x + shootSpend
            break;
          case 3:
            bulletArray[i].bullet_y = bulletArray[i].bullet_y - shootSpend
            break;
          case 4:
            bulletArray[i].bullet_y = bulletArray[i].bullet_y + shootSpend
            bulletArray[i].bullet_x = bulletArray[i].bullet_x + shootSpend
            break;
          case 5:
            bulletArray[i].bullet_y = bulletArray[i].bullet_y - shootSpend
            bulletArray[i].bullet_x = bulletArray[i].bullet_x - shootSpend
          break;
          case 6:
            bulletArray[i].bullet_y = bulletArray[i].bullet_y + shootSpend
            bulletArray[i].bullet_x = bulletArray[i].bullet_x - shootSpend
          break;
          case 7:
            bulletArray[i].bullet_y = bulletArray[i].bullet_y - shootSpend
            bulletArray[i].bullet_x = bulletArray[i].bullet_x + shootSpend
          break;
          }
          
          switch (numberArray[index].pitchOn) {
            case 0:
              ctx.drawImage(a_bullet, 0, 0, 120, 120, bulletArray[i].bullet_x, bulletArray[i].bullet_y, 20, 20)
              break;
            case 1:
              ctx.drawImage(b_bullet, 0, 0, 220, 220, bulletArray[i].bullet_x, bulletArray[i].bullet_y, 20, 20)
              break;
            case 2:
              ctx.drawImage(c_bullet, 0, 0, 120, 120, bulletArray[i].bullet_x, bulletArray[i].bullet_y, 20, 20)
              break;
            default:
              ctx.drawImage(d_bullet, 0, 0, 120, 120, bulletArray[i].bullet_x, bulletArray[i].bullet_y, 20, 20)
              break;
          }

    　　} else {
          bulletArray.splice(i, 1)
  　　　　 i--
        }
      }

      socket.emit('moveBullet', numberArray)

    })

    
  }

  function ultimateSkill() {
    socket.emit('ultimateSkill', p)
    
  }

    

    //接收服务器返回的信息
    socket.on('addCart',function(message, data){
      messageArray.push('<br/>' + message)
      numberArray = data
      messageText.innerHTML = messageArray
    })

    socket.on('off',function(message, data){
      messageArray.push('<br/>' + message)
      numberArray = data
      messageText.innerHTML = messageArray
      data.forEach(item => {
        if (item.hasOwnProperty("pitchOn") && item.id != id) {
          upD[item.pitchOn].style.border = "1px solid blue"
        }
      })
    })

    //接收服务器返回的信息
    socket.on('getId',function(rid, data){
      id = rid
      data.forEach(item => {
        if (item.hasOwnProperty("pitchOn") && item.id != id) {
          upD[item.pitchOn].style.border = "1px solid blue"
        }
      })
    })

    socket.on('pitchOn',function(data){
      numberArray = data
      data.forEach(item => {
        if (item.hasOwnProperty("pitchOn") && item.id != id) {
          upD[item.pitchOn].style.border = "1px solid blue"
        }
      })
    })

    socket.on('ready',function(message, data){
      messageArray.push('<br/>' + message)
      numberArray = data
      messageText.innerHTML = messageArray
      let number = 0
      let time = 3
      let timer 
      data.forEach(item => {
        if (item.readyState) {
          number++
        }
      })
      if (number == data.length) {
        readyDom[0].innerHTML = "游戏即将开始"
        readyDom[0].style.pointerEvents = "none"

        numberArray.forEach((item, index) => {
          if (item.pitchOn == pitchNumber) {
            p = index
            item.p = p
          }
          item.x = 100 * (item.pitchOn + 1) * 2
          item.y = 100 * (item.pitchOn + 1) * 2
          item.bullet_x = 100 * (item.pitchOn + 1) * 2
          item.bullet_y = 100 * (item.pitchOn + 1) * 2
        })
        socket.emit('init', numberArray)

        timer = setInterval(()=> {
          if (time > 0) {
            time--
            readyDom[0].innerHTML = time + "秒后游戏开始"
          } else {
            canvas.style.display = ""
            up[0].style.display = "none"
            setInterval(() => {
              drawGame()
            }, 100)
            clearInterval(timer)
          }
        }, 1000)

      }
    })

    readyDom = document.getElementsByClassName("ready")

    function ready() {
      if (pitchNumber !== "") {
        readyState = !readyState
        socket.emit('ready', readyState)
        readyDom[0].innerHTML = readyState ? "取消准备" : "准备" 
      } else {
        alert("请先选择人物!")
      }
     
    }



    socket.on('serveMove',function(data){
      numberArray = data
    })

    socket.on('shoot',function(data){
      console.log(data)
      numberArray = data
      cancelAnimationFrame(bulletAnimation)
      drawBullet()
    })

    socket.on('moveBullet',function(data){
      let result = document.getElementsByClassName("result")
      result[0].style.display = "block"
      if (data == p) {
        result[0].innerHTML = "game over! you win!"
      } else {
        result[0].innerHTML = "game over! you lose!"
      }
    })



    function collisionDetection() {
      numberArray.forEach(item => {
        item.bulletArray.forEach(it => {
        })
      })
    }

    


</script>

<style>
  html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    padding: 0;
  }
  .up {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
    text-align: center;
  }
  .up-c {
    width: 1200px;
    height: 360px;
    overflow: hidden;
    margin: auto;
    padding-top: 100px;
  }
  .up-d {
    width: 260px;
    height: 260px;
    border: 1px solid rgb(223, 235, 231);
    text-align: center;
    float: left;
    padding-top: 20px;
  }
  .text {
    width: 80%;
    height: 200px;
    border: 1px solid black;
    margin: auto;
    overflow: auto;
  }
  .ready {
    width: 200px;
    height: 50px;
    margin: 100px auto;
    background-color: pink;
    border-radius: 50px;
    color: white;
    font-size: 22px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
  }
  .result {
    height: 100%;
    width: 100%;
    background-color: pink;
    color: azure;
    font-size: 50px;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
  }
</style>